<template>
    <view class="content">
        <view class="firstBox">
			<image src="https://cdn.uviewui.com/uview/album/1.jpg" class="img"></image>
			<view v-if="isLogin" class="user">
				<view>
					
					<image  class="headImg" :src="userImg"  ></image>
				</view>
				<view class="userName">{{userName}}</view>
			</view>
			<view v-else  class="btn" open-type="getUserInfo" @click="login">
				   <u-button type="success"  text="微信登录" ></u-button>
			</view> 
        </view>
		<view class="main">
			<view class="title">
				<view class="test">我的战绩</view>
				<!-- <view class="share" @click="shareApp">
					<u-button type="success" :plain="true" size="mini" text="分享"></u-button>
				</view> -->
			</view>
			<view>
				<view v-if="myRank.length>0">
				<view v-for="(item,index) in myRank" :key=index class="card" >
					<view>
						<view class="lines">
							<view>{{item.timeScope}}</view>
							<view>{{item.totalTime}}</view>
						</view>
						<view class="lines two">
							<view>{{item.rank}}</view>
							<view style="display: flex;">
								<view >
									<u-icon :name="thumbUpName"  :color="thumbColor"  size="20"></u-icon>
								</view>
								<view style="line-height: 20px; margin-top: 2px;">{{item.otherLike}}</view>
							</view>
						</view>
					</view>
				</view>
				</view>
				<view class="empty" v-else>
					<!-- 请先登录后在,才能查看排行榜哦! -->
					暂无信息
				</view>
			</view>
		</view>
    </view>
</template>
<script>
import uButton from '../../uni_modules/uview-ui/components/u-button/u-button.vue'
 export default{
  components: { uButton },
     data(){
         return{
			 userInfo:false,
			 isLogin:false,
			 myRank:[],
			 thumbUpName:'thumb-up',
			 thumbColor:'',
			 userName:'',
			 userImg:'',
			 token:'',
			 UserName:""
         }
     },
	 onLoad(){
		 
	 },
     onShow() {
		  // uni.getStorageSync('token', null);
		 this.token = this.$cache.get('token');
		 console.log("保存的token",this.token);
		 console.log("保存的name", this.$cache.get('userName'));
		 console.log("保存的img", this.$cache.get('userImg'));
		 if(this.token !=null){
			this.isLogin =true
			this.userName = this.$cache.get('userName');
			this.userImg = this.$cache.get('userImg');
			this.userInfo = true
			this.getList()
		 }
	},
	methods: {
		//登录
        login(){
			// 步骤一：调用uni.getUserProfile(),弹出授权窗口
			uni.getUserProfile({
				desc:'注册',
				success:(res)=>{
					// 用户点击了允许，拿到了用户信息
					console.log('用户信息'+JSON.stringify(res.userInfo));
					let userInfo  = res.userInfo;
					// 步骤二：调用uni.login(),获取code
					uni.login({
						//登录服务提供商，这里是微信
						provider:'weixin',
						success:(res2)=>{
							uni.showLoading({
								title:'登录中…'
							})
							// 获取code
							uni.hideLoading()
							var code =res2.code;
							console.log('获取code成功:'+JSON.stringify(res2))
							// 步骤三：向后端服务器发起请求，带上参数 ：code和用户信息nui.request()
							// console.log('aaaaa',code);
							this.$myRequest({
								url:'/app/login_by_weixin',
								method:'post',
								data:{
									code:code,
									userInfo: {
									    avatarUrl:userInfo.avatarUrl ,
									    city: userInfo.city,
									    country: userInfo.country,
									    gender: userInfo.gender,
									    language: userInfo.language,
									    nickName: userInfo.nickName,
									    province: userInfo.province
									  }
								}
							}).then(res3 =>{
								// console.log("返回数据",res3)
								let data = res3.data.data;
								// console.log("用户信息",data);
								console.log("*******",data.username)
								this.isLogin = true;
								this.userName = data.nickName;
								this.userImg = data.avatarUrl; 
								this.Username = data.username
								// console.log("############",data.token)
								// uni.setStorageSync('token', data.token)
								// uni.setStorageSync('userName', data.nickName)
								// uni.setStorageSync('userImg', data.avatarUrl)
								this.$cache.set('token', data.token);
								this.$cache.set('userName', data.nickName)
								this.$cache.set('userImg', data.avatarUrl)
								this.$cache.set('UserName', data.username)
								console.log(`this.$cache.get("UserName")`,this.$cache.get("UserName"));
								console.log(`this.$cache.get("token")`,this.$cache.get("token"));
								var aa =this.$cache.get('token');
								// // var aa = uni.getStorageSync('token');
								// console.log('保存的token',aa);
								this.UserName = 	this.$cache.get('UserName')
								this.getList()
							}).catch(err =>{
							})
						}
					})
				}
			})
        },
		// 获取战绩列表
		getList(){
			this.$myRequest({
				url:`/app/home/get_user_week_rank/${this.UserName}`,
				method:'get',
				data:{
					// username:'17'
				}
			}).then(res=>{
				let data = res.data.data;
				console.log("数据",data);
				this.myRank = data;
				console.log("数据",this.myRank);
				// this.myRank.map(item=>{
				// 	// let time =item.totalTime
				// 	// console.log("听力时间",time);
				// 	if(item.totalTime == 0){
				// 		item.totalTime = item.totalTime+"分钟";
				// 	}else if(item.totalTime < 60){
				// 		item.totalTime = item.totalTime+"秒";
				// 	}else if(item.totalTime < 3600){
				// 		let m = parseInt(item.totalTime/60);
				// 		let s = item.totalTime%60
				// 		item.totalTime = m+"分钟"+s+"秒";
				// 	}else{
				// 		let h = parseInt(item.totalTime/3600);
				// 		let remainder = item.totalTime%3600;
				// 		let m = parseInt(remainder/60);
				// 		item.totalTime = h+"小时"+m+"分钟";
				// 	}
				// })
				console.log("我的排行",this.myRank)
			})
		},
		
		// 分享
		// shareApp(){
		// 	 // uni.showToast({
		// 	 //    title: '点击了分享',
		// 	 //    duration: 2000
		// 	 //     });
		// 		 uni.share({
		// 		     provider: 'weixin',
		// 		     scene: "WXSceneSession",
		// 		     type: 5,
		// 		     imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png',
		// 		     title: '欢迎体验uniapp',
		// 		     miniProgram: {
		// 		         id: 'gh_abcdefg',
		// 		         path: 'pages/index/index',
		// 		         type: 0,
		// 		         webUrl: 'http://uniapp.dcloud.io'
		// 		     },
		// 		     success: ret => {
		// 		         console.log('分享的数据:',JSON.stringify(ret));
		// 		     }
		// 		 });
		// },
		
		// 点赞
		thumbUp(item){
			let tag = ""
				let name = this.UserName
			if(this.thumbUpName === 'thumb-up'){
				tag = 1
				this.thumbUpName = 'thumb-up-fill';
				this.thumbColor = '#2979ff';
				item.otherLike++;
				let urlparams = `?username=${name}&tag=${tag}`
				this.$myRequest({
					url:'/app/home/user_week_like'+urlparams,
					method:'get',
					data:{
						// username:item.userName,
						// tag:item.tag,
					}
				}).then(res=>{
						console.log("返回参数",res);
						console.log("点赞成功")
					}
					).catch(err =>{
						console.log(err)
					})			
			}else{
				tag = 0
				this.thumbUpName = 'thumb-up';
				this.thumbColor = '';
				item.otherLike--;
				let urlparams = `?username=${name}&tag=${tag}`
					this.$myRequest({
					url:'/app/home/user_week_like'+urlparams,
					method:'get',
					data:{
						// username:item.userName,
						// tag:item.tag,
					}
				}).then(res=>{
						console.log("返回参数",res);
						console.log("点赞成功")
					}
					).catch(err =>{
						console.log(err)
					})		
			}
		}
		
	}
 }
</script>

<style lang="scss" scoped>
.content{
    width: 100%;
	min-height: 100vh;
	background-color: #eee;
	.firstBox{
		position: relative;
		.img{
		    width: 100%;
		    height: 200px;
		}
		.btn{
			height: 30px;
			position: absolute;
		    width: 30%;
			left: 35%;
			top: 85px;
		   } 
		.user{
			width: 100px;
			position: absolute;
			left:calc(50% - 40px);
			top: 50px;
			.userName{
				text-align: center;
				font-size: 16px;
				color:white;
				font-weight:bold;
				height:50px;
				line-height:50px
			}
			.headImg{
				width: 80px;
				height: 80px;
				border-radius: 40px;
				margin-left: 10px;
			}
		}
		
	}
	.main{
		.title{
			display: flex;
			justify-content:space-between;
			.test{
				font-size: 12px;
				margin-left: 3%;
			}
			.share{
				width: 10%;
				margin-right: 5%;
				// height: 5rpx;
			}
		}
		.card{
			border-radius: 5px;
			background-color: #fff;
			width: 85%;
			height: 60px;
			margin: 5px auto;
			padding: 5px 5%;
			font-size: 12px;
			.lines{
				display: flex;
				justify-content:space-between;
			}
			.two{
				margin-top: 20px;
			}
		}
		.empty{
			font-size: 12px;
			text-align: center;
		}
	}
  
}

</style>
